<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- 搜索区 -->
        <div>
          <el-form :inline="true">
            <el-form-item label="包类型">
              <el-select
                v-model="page.InstrumentkitsType"
                placeholder="请选择"
                style="width: 150px"
              >
                <el-option label="专科包" value="1" />
                <el-option label="通用包" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="包名称">
              <el-input
                v-model="page.InstrumentkitsName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="getInstrus">查询</el-button>
              <el-button type="info" @click="empy">清空</el-button>
              <el-button type="primary" @click="">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-container>
        <el-aside width="970px">
          <span style="font-weight: 70; margin-bottom: 10px">包列表</span>
          <div style="margin-top: 10px">
           
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" label="序号" width="55" />
              <el-table-column prop="instrumentkitsType" label="包类型" width="90" >
                 <template #default="scope">
                {{ scope.row.instrumentkitsType == 0 ? '专用包' : '通用包'}}
                </template>
              </el-table-column>
              <el-table-column prop="instrumentkitsNo" label="包编码" width="90" />
              <el-table-column prop="instrumentkitsName" label="包名称" width="90" />
              <el-table-column prop="department" label="科室" width="90" />
              <el-table-column prop="sterilizamethod" label="灭菌方式" width="90" >
                   <template #default="scope">
                {{ scope.row.sterilizamethod == 0 ? '高温' : '干热'}}
                </template>
              </el-table-column>
              <el-table-column prop="outerpackags" label="外包装" width="90" >
                 <template #default="scope">
                {{ scope.row.outerpackags == 0 ? '无纺布 ' : '塑料袋'}}
                </template>
              </el-table-column>
              <el-table-column prop="effectdays" label="有效天数" width="90" />
              <el-table-column prop="serviceprice" label="服务价格" width="90" />
              <el-table-column prop="state" label="状态" width="90" />
              <el-table-column fixed="right" label="操作" min-width="100">
                <template #default>
                  <el-button link type="primary" size="small">Edit</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>


          
        </el-aside>
           
        <el-main width="660px">
    
     <span style="font-weight: 70; margin-bottom: 10px">器械明细</span>
        <div style="margin-top: 10px">
              <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="apparatusNo" label="器械编码" width="90" />
            <el-table-column prop="apparatusName" label="器械名称" width="90" />
            <el-table-column prop="specification" label="规格" width="90" >
                <template #default="scope">
                {{ scope.row.specification == 0 ? '清洗设备' : ' 消毒设备'}}
                </template>
              </el-table-column>
            <el-table-column prop="quantity" label="数量" width="90" />
            <el-table-column prop="durableproperties" label="耐用属性" width="90" >
                 <template #default="scope">
                {{ scope.row.durableproperties == 0 ? '耐用品' : '  一次性用品'}}
                </template>
              </el-table-column>
          </el-table>
        </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import type { TreeInstance } from "element-plus";
import axios from "axios";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { Check, Close } from "@element-plus/icons-vue";
const router = useRouter();

const page = reactive({
  InstrumentkitsNo: "",
  InstrumentkitsName: "",
  InstrumentkitsType: null,
});

const tableData = ref([]);

onMounted(() => {
    getInstrus()
})
// 显示器械包页面
const getInstrus = () => {
    axios.get("https://localhost:7224/api/Instrumentkit/QueryInstrumentkit", { params: page })
    .then((res) => {
        tableData.value = res.data.data;
    })
}


// 清空--搜索区
const empy = () => {
  page.InstrumentkitsNo = "";
  page.InstrumentkitsName = "";
  page.InstrumentkitsType = null;
  getInstrus();
};


</script>

<style scoped>
</style>